<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <link rel="stylesheet" href="./swiper-3.4.2.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="./swiper-3.4.2.min.js"></script>
</head>

<body>
    <!--背景以及蒙层-->
    <div class="backImg">
        <div class="model"></div>
    </div>
    <div class="navbackChange">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
               </button>
                    <img class="headerImg" src="./img/y8.png" alt="">
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                </div>
            </div>
        </nav>
        <div class="navLeft">
            <h1 class="navH1">皇者德扑</h1>
            <h2 class="navH2">专注朋友间的线上牌局体验</h2>
            <p class="navP">输入验证码，5秒钟内创建好您的私人牌局...</p>
            <button class="btn">安卓下载</button>
            <button class="btn">苹果下载</button>
        </div>
    </div>
    <div class="navBottom navbackChange">
        <h1 class="navBH1">
            堵车 ? 距离远 ?<br> 皇者德扑 – 线上组局神器！
        </h1>
        <p>让皇者德扑帮助你和朋友们创建一个属于自己的扑克之夜吧！</p>
    </div>
    <main>
        <img class="Flimg" src="./img/1.png" alt="">
        <div class="row PSP">
            <div class="col-md-4">
                <img src="./img/icon.png" alt="">
                <section class="PWord">
                    <p>牌局设置</p>
                    <span>快捷的快速牌局设置，使房主可以随心定制私人牌局并掌控牌局的所有细节。</span>
                </section>
            </div>
            <div class="col-md-4">
                <img src="./img/number.png" alt="">
                <section class="PWord">
                    <p>数据分析</p>
                    <span>记录您的牌局生涯，专业、深度的数据分析将帮助您成为更加优秀的德扑选手。</span>
                </section>
            </div>
            <div class="col-md-4">
                <img src="./img/video.png" alt="">
                <section class="PWord">
                    <p>牌谱播放</p>
                    <span>历史牌局的精彩瞬间可以记录和追溯，也能通过微信实时分享给你的好友，让他们见证你的实力。</span>
                </section>
            </div>
        </div>
        <p class="manySetting">丰富的牌局设置</p>
        <div class="carouselChange">
            <div class="setting">
                <!--<div class="setL">
                <section>
                    <div class="backII"></div><span>玩家人数、牌局时长、buyin倍数，多维度定制您的私人牌局</span></section>
                <section>
                    <div class="backII"></div><span>玩家人数、牌局时长、buyin倍数，多维度定制您的私人牌局</span></section>
                <section>
                    <div class="backII"></div><span>玩家人数、牌局时长、buyin倍数，多维度定制您的私人牌局</span></section>
            </div>-->
                <img src="./img/2.png" alt="">
                <!--<div class="setL">
                <section>
                    <div class="backII"></div><span>玩家人数、牌局时长、buyin倍数，多维度定制您的私人牌局</span></section>
                <section>
                    <div class="backII"></div><span>玩家人数、牌局时长、buyin倍数，多维度定制您的私人牌局</span></section>
                <section>
                    <div class="backII"></div><span>玩家人数、牌局时长、buyin倍数，多维度定制您的私人牌局</span></section>
            </div>-->
            </div>
        </div>
        <div class="swiper-container Dis" style="width: 100%;">
            <!--swiper容器[可以随意更改该容器的样式-->
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/assss.png"></div>
                <div class="swiper-slide"><img src="./img/assss.png"></div>
                <div class="swiper-slide"><img src="./img/assss.png"></div>
                <div class="swiper-slide"><img src="./img/assss.png"></div>
                <div class="swiper-slide"><img src="./img/assss.png"></div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <!--<div class="swiper-pagination" style="width: 100px;float: right"></div>-->
        </div>
        <div class="row dataSy">
            <div class="col-md-6" style="text-align:center;padding-right:0"><img src="./img/4.png" alt=""></div>
            <div class="col-md-6" class="Bul">
                <p class="DWordP">专业的数据分析</p>
                <ul class="Dul">
                    <li>完善的数据系统，记录您的游戏生涯；专业的数据分析，协助您快速提升德扑竞技水平</li>
                    <li>俱乐部数据可以直观查看您在每个俱乐部的历史战绩，维度更清晰</li>
                    <li>入池率（VPIP），玩家主动向底池中投入筹码的比率，反映玩家打牌的松紧度。</li>
                    <li>摊牌率（WTSD），指玩家看到翻牌圈并玩到摊牌的百分比。以此衡量玩家在翻牌后弃牌的倾向。</li>
                </ul>
            </div>
        </div>
        <div class="row dataSy backBlack" style="background-color:black">
            <div class="col-md-6" style="text-align:center;padding-right:0"><img src="./img/4.png" alt=""></div>
            <div class="col-md-6" class="Bul">
                <p class="DWordP">专业的数据分析</p>
                <ul class="Dul wordWhite">
                    <li>完善的数据系统，记录您的游戏生涯；专业的数据分析，协助您快速提升德扑竞技水平</li>
                    <li>俱乐部数据可以直观查看您在每个俱乐部的历史战绩，维度更清晰</li>
                    <li>入池率（VPIP），玩家主动向底池中投入筹码的比率，反映玩家打牌的松紧度。</li>
                    <li>摊牌率（WTSD），指玩家看到翻牌圈并玩到摊牌的百分比。以此衡量玩家在翻牌后弃牌的倾向。</li>
                </ul>
            </div>
        </div>
        <div class="shareWord">牌谱收藏与分享，与好友一起回味精彩瞬间</div>
        <div class="bottomImg"><img src="./img/底部(1).png" alt=""></div>
    </main>
    <footer>版权所有©2016-2017 hipokers.com</footer>
    <script>
        $(window).resize(function () {
            var defaultouterWidth = $(document).outerWidth();
            if (defaultouterWidth <= 1200) {
                $('.carouselChange').addClass('Dis')
                $('.swiper-container').removeClass('Dis')
            } else {
                $('.carouselChange').removeClass('Dis')
                $('.swiper-container').addClass('Dis')
            }
        })
        var mySwiper = new Swiper(".swiper-container", {
            direction: "horizontal",/*横向滑动*/
            loop: true,/*形成环路（即：可以从最后一张图跳转到第一张图*/
            pagination: ".swiper-pagination",/*分页器*/
            autoplay: 3000,/*每隔3秒自动播放*/
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        })
    </script>
</body>

</html>